<template>
	<div>
		<!-- <doc-preview :doc-url="docUrl" :businessId="businessId" /> -->
		<div class="doc-image">
			<img v-for="image in docImages" :src="image" alt="" />
		</div>
		<signature-manu
			:visible.sync="showPrint"
			:businessId="businessId"
			:productId="productId"
			:dataDelivery="signInfo.dataDelivery"
		/>
		<signature-elec
			:visible.sync="showSignelec"
			:businessId="businessId"
			:productId="productId"
			:default-form="signInfo"
			@use-manu="handleUseManu"
		/>
		<signature
			:visible.sync="showSign"
			:signature="signInfo.signature"
			:pageImages="docImages"
			@confirm="onConfirm"
		/>
		<div class="insure-confirm">
			<el-button @click="showSign = true" size="medium" type="primary"
				>确认投保并签章</el-button
			>
		</div>
	</div>
</template>

<script>
import _ from 'lodash'
import DocPreview from '../components/docPreview.vue'
import SignatureElec from '../components/signature-elec.vue'
import SignatureManu from '../components/signature-manu.vue'
import Signature from '../components/signature.vue'
import pdf2img from '@/utils/pdf2img'
import { getSignatures, isUploadPayFile } from '@/api'
export default {
	name: 'stamp', // 盖章
	data() {
		return {
			showPrint: false,
			showSignelec: false,
			showSign: false,

			signInfo: {
				customerName: '',
				certNum: '',
				leaderName: '',
				leaderIdNum: '',
				contactPhone: '',
				code: '',
				signature: '',
				dataDelivery: '',
				signatureData: []
			},

			docImages: []
		}
	},
	computed: {
		docUrl() {
			return this.$route.query.docUrl
		},
		businessId() {
			return this.$route.query.businessId
		},
		productId() {
			return this.$route.query.productId
		}
	},
	mounted() {
		getSignatures(this.businessId).then((res) => {
			this.signInfo = res.data
		})
		this.getPdfImages()
	},
	created() {},
	methods: {
		handleUseManu() {
			this.showSignelec = false
			this.showPrint = true
		},

		async getPdfImages() {
			const images = await pdf2img(this.docUrl)
			this.docImages = images
		},

		onConfirm(data) {
			this.signInfo.signatureData = data
			this.showSignelec = true
		}
	},

	components: { DocPreview, SignatureElec, SignatureManu, Signature }
}
</script>

<style lang="scss" scoped="scoped">
.insure-confirm {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: 15px;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.13);
}

.doc-image {
	background: gray;
	padding-block: 5px;
	img {
		width: 900px;
		display: block;
		margin-inline: auto;
		margin-bottom: 9px;
	}
}
</style>
